<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <table border="1">
    <tr><th>id</th><th>标题</th><th>价格</th><th>库存</th></tr>
    <tr v-for="p in arr">
      <td>{{p.id}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <!--删除超链接 废掉跳转功能 点击时把这一行对应的商品id传递过去-->
      <td>
        <!--属性中出现变量的话必须使用属性绑定,在属性名前面加: -->
        <a :href="'/update.html?id='+p.id">修改</a>
        <a href="javascript:void(0)" @click="del(p.id)">删除</a>
      </td>
    </tr>
  </table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
  let v = new Vue({
    el: "body>div",
    data: {
      arr:[]
    },
    methods: {
      del(id){
        if (confirm("您确认删除此商品吗?")){
          //发出异步get请求
          axios.get("/delete?id="+id).then(function (response) {
            //只要此处代码执行就代表删除成功 response可写可不写
            location.reload();//刷新页面
          })
        }
      }
    },
    created:function () {
      //此方法是Vue对象初始化过程中的方法,会由Vue对象调用,进入到页面立即发请求的
      //代码写在此方法中
      //发请求获取所有商品数据 把数据赋值给arr数组 页面会自动显示出查询到的商品
      axios.get("/select").then(function (response) {
        //服务器响应回来的是多个商品的信息 直接赋值给arr
        //服务器响应的多个商品信息是保存在一个JSON格式的字符串里面的
        //Axios框架当发现是装着多个商品信息的Json字符串时
        // 会自动将其转成JavaScript语言中的数组
        v.arr = response.data;
      })
    }
  })
</script>
</body>
</html>